<template>

  <view class="container">
    <view class="top">
      <view class="topCont">
        <div class="aiYuYin">
          <view class="img1" v-if="aiModel">
            <image src="/static/image/aiYuyin1.gif" alt=""></image>
          </view>
          <view class="img2" v-else>
            <image src="/static/image/aiYuyinJin1.png" alt=""></image>
          </view>
        </div>
        <view class="yuYinText">
          {{ answerList[answerType].label}}
        </view>
      </view>
    </view>
    <view class="content">
      <view class="toolBox">
        <view class="item">
          <image src="/static/image/amplifier.png" @click="handleScale(1)"></image>
        </view>
        <view class="item">
          <image src="/static/image/reduce.png" @click="handleScale(-1)"></image>
        </view>
        <view class="item" @click="handleImage">
          <image src="/static/image/rotate.png" v-if="!message"></image>
          <image src="/static/image/rotateIn.png" v-else></image>
        </view>
      </view>
      <view class="imgBox">
        <web-view @message="messageFunc" :key="webviewKey" style="width: 550px;height: 550px" :src="src"></web-view>
      </view>
    </view>
    <view class="footer">
      <view class="footerBox" :style="{'padding':tipTextShow ? '1rpx 10rpx':'1rpx 30rpx' }" @click="handleClick">
        <voice></voice>
        <view class="tip" v-if="tipTextShow">
          没有听清楚，请再说一次
        </view>
      </view>
    </view>
  </view>
  <view class="projectTip" v-if="nextTipShow">
    <view class="text">本环节测评已经结束</view>
    <view class="nextBtn"></view>
  </view>
</template>

<script setup lang="ts">
import {getCurrentInstance, ref} from "vue";
import voice from '@/components/voice.vue'
import {onLoad} from "@dcloudio/uni-app";
import {synthesize} from "@/utils/yuyin";
import {getSessionStorage} from "@/utils";
import {useRoute} from "vue-router";
import {startShibie, startWeakUp} from "@/utils/speech";

const route = useRoute() // 获取当前路由
const typeIndex = ref(0) // 当前展示的图片下标
const showObj = ref() // 当前展示的图片
const currentInstance = ref() // 获取当前实例
const answerType = ref(0)
const answerList = ref([
  {
    value: 0,
    label: '发挥你的想象力，请问它看上去像什么？'
  },
  {
    value: 1,
    label: '你是从图片的哪个部分、或者说哪个角度看出来的？'
  },
  {
    value: 2,
    label: '这一联想带给你一种怎样的感受？请说出如下词语中的一个（愉悦、温暖、平和、敌意、焦虑）'
  }
])
const nextTipShow = ref(false)
const aiModel = ref(true)
const tipTextShow = ref(true)
const src = ref('')

const webviewKey = ref(0)
const message = ref(false)
const scaleIndex = ref(1)
onLoad(async (query) => {
  // const showArr = getSessionStorage("inkblotList")
  // //#ifdef APP-PLUS
  // currentInstance.value = getCurrentInstance()
  // await setWebviewHeight()
  // if (query) {
  //   typeIndex.value = query.inkblot
  //   showObj.value = showArr[typeIndex.value - 1]
  // }
  setTimeout(()=>{
    setSynthesize()
  },3000)
  //#endif
  // //#ifdef H5
  // if (route.query) {
  //   typeIndex.value = route.query.inkblot
  //   showObj.value = showArr[typeIndex.value - 1]
  //   src.value = `/static/konva.html?imgUrl=${showObj.value.url}`
  //   console.log(src.value, 'src')
  // }
  // //#endif

})

const handleClick = ()=>{
  answerType.value += 1
  if(answerType.value >= 3){
    return
  }else{
    // synthesize(answerList.value[answerType.value].label)
    setSynthesize()
  }
}
const setSynthesize = ()=>{
  synthesize(answerList.value[answerType.value].label).then(({code}:any)=>{
    if(code === 200){
      console.log('要开始识别语音了')
      startWeakUp().then((res:any)=>{
        if(res.code === 300){
          startShibie().then(({words}:any)=>{
            console.log(words,'words')
            handleClick()
          })
        }
      })
    }
  })
}
const messageFunc = (msg) => {
  console.log(JSON.stringify(msg))
}
const sendMsgToWebview = (type: any, value: any, imgUrl: string = showObj.value.url) => {
  // #ifdef APP-PLUS
  const currentWebview = currentInstance.value.proxy?.$scope.$getAppWebview(); //获取当前web-view

  const _data = {
    type: type,
    value: value,
    imgUrl: imgUrl
  }
  setTimeout(() => {
    const wv = currentWebview.children()[0];
    wv.evalJS(`msgFromUniapp(${JSON.stringify(_data)})`)
  }, 300)
  // #endif
}
const handleScale = (num: number) => {
  if (num === 1) {
    scaleIndex.value += 0.2
  } else {
    if (scaleIndex.value <= 0) {
      scaleIndex.value = 0.2
      return
    }
    scaleIndex.value -= 0.2
  }
  // #ifdef APP-PLUS
  sendMsgToWebview('scale', scaleIndex.value)
  // #endif
  // #ifdef H5
  src.value = `/static/konva.html?scale=${scaleIndex.value}&imgUrl=${showObj.value.url}`
  // #endif
}
const handleImage = async () => {
  message.value = !message.value
  // #ifdef APP-PLUS
  sendMsgToWebview('message', message.value)
  // #endif
  // #ifdef H5
  src.value = `/static/konva.html?message=${message.value}&imgUrl=${showObj.value.url}`
  // #endif
}


// methods方法
const setWebviewHeight = () => {
  if (!currentInstance.value) {
    console.error('getCurrentInstance is null')
    return
  } else {
    // #ifdef APP-PLUS
    let height = 0; //定义动态的高度变量，如高度为定值，可以直接写
    uni.getSystemInfo({
      //成功获取的回调函数，返回值为系统信息
      success: sysinfo => {
        height = sysinfo.windowHeight - 47; //自行修改，自己需要的高度
      },
    });
    const currentWebview = currentInstance.value.proxy?.$scope.$getAppWebview(); //获取当前web-view
    setTimeout(function () {
      const wv = currentWebview.children()[0];
      wv.setStyle({
        height: 520,
        width: 700,
        top: 60,
        left: 200,
        background: 'transparent'
      });
    }, 1000); //如页面初始化调用需要写延迟
    // #endif
  }
}
</script>


<style scoped lang="scss">
.projectTip {
  z-index: 9999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 232.8rpx;
  height: 188rpx;
  background-image: url("@/static/image/porject_tip.png");
  background-size: 100% 100%;

  .text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 11.7rpx;
    color: #2FEDFF;
    letter-spacing: 1rpx;
    text-align: center;
  }

  .nextBtn {
    position: absolute;
    bottom: 25rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 124.8rpx;
    height: 37.05rpx;
    background-image: url("@/static/image/project_btn.png");
    background-size: 100% 100%;
  }
}

.container {
  width: 100%;
  height: 100%;
  background-image: url("@/static/image/project_Answer_bg_1.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .top {
    width: 100%;
    height: 40rpx;
    background: #0D1328;
    display: flex;
    justify-content: center;
    align-items: center;

    .topCont {
      gap: 10rpx;
      display: flex;
      align-items: center;

      .yuYinText {
        opacity: 0.9;
        font-weight: 600;
        font-size: 11.7rpx;
        color: #FFFFFF;
        letter-spacing: 1rpx;
        text-align: center;
      }
    }
  }

  .content {
    position: relative;
    flex: 1;

    .toolBox {
      position: absolute;
      left: 20rpx;
      top: 50%;
      padding: 21rpx 3.9rpx;
      transform: translateY(-50%);
      background: #0D1328;
      border-radius: 16.19rpx;
      display: flex;
      flex-direction: column;
      gap: 11.8rpx;

      .item {
        width: 23.4rpx;
        height: 23.4rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .imgBox {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 324.48rpx;
      height: 325.26rpx;
      //background: #FFFFFF;
      border-radius: 13.65rpx;
      margin-top: 10rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .footer {
    position: absolute;
    bottom: 14rpx;
    width: 100%;
    display: flex;
    justify-content: center;

    .footerBox {
      background: #0D1328;
      border-radius: 18.53rpx;
      display: flex;
      align-items: center;
      gap: 5rpx;
      //padding: 5rpx 10rpx;
      .tip {
        font-weight: 400;
        font-size: 7.8rpx;
        color: #FFFFFF;
        letter-spacing: 0;
        opacity: 0.5;
      }
    }
  }
}

.aiYuYin {
  width: 35rpx;
  height: 35rpx;
  position: relative;
  overflow: hidden;
  border-radius: 50%;

  .img1 {
    width: 80rpx;
    height: 54.6rpx;
    position: absolute;
    left: -22.5rpx;
    top: -9.76rpx;
  }

  .img2 {
    width: 80rpx;
    height: 54.6rpx;
    position: absolute;
    left: -22.5rpx;
    top: -9.76rpx;
  }

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
